<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的好友列表</title>
    <link th:href="@{./css/bootstrap.min.css}" rel="stylesheet"/>

</head>
<body>

<div class="container-fluid">
    <!-- 查询栏目 -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="根据QQ号搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据关系搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">好友</option>
                    <option value="1">黑名单</option>
                </select>
                <input class="form-control me-2" type="search" placeholder="根据好友昵称搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据性别搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
                <input class="form-control me-2" type="search" placeholder="根据省份搜索" aria-label="Search">
                <input class="form-control me-2" type="search" placeholder="根据城市搜索" aria-label="Search">
                <input class="form-control me-2" type="search" placeholder="根据住址搜索" aria-label="Search">

            </form>
        </div>
    </nav>

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据状态搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">在线</option>
                    <option value="1">离线</option>
                    <option value="2">隐身</option>
                </select>


                <input class="form-control me-2" type="search" placeholder="年龄范围" aria-label="Search">-
                <input class="form-control me-2" type="search" placeholder="年龄范围" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>


    <!-- 列表栏目 -->
    <div class="row">

        <div class="bd-example">
            <p class="fs-6">我：蝴蝶飞飞 ， 当前等级为：1，我的好友共：49个（包含黑名单）</p>
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">头像</th>
                    <th scope="col">好友QQ号码</th>
                    <th scope="col">我们的关系</th>
                    <th scope="col">好友昵称</th>
                    <th scope="col">性别</th>
                    <th scope="col">年龄</th>
                    <th scope="col">省份</th>
                    <th scope="col">城市</th>
                    <th scope="col">住址</th>
                    <th scope="col">电话</th>
                    <th scope="col">状态</th>
                    <th scope="col">等级</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="list : ${data.records}">
                    <th scope="row" th:switch="${list.info.sex}">
                        <span th:case="0"><img src="./images/男.jpeg" width="30" height=""></span>
                        <img th:case="1" src="./images/女.jpeg" width="30" height="">
                    </th>
                    <th scope="row" th:text="${list.user.qqid}">88662753</th>
                    <td>
                        <span class="text-success" style="color: green !important"
                              th:if="${list.rel.relationStatus==0}">好友</span>
                        <span class="text-success" style="color: red !important" th:if="${list.rel.relationStatus==1}">黑名单</span>
                    </td>
                    <td th:text="${list.info.nickName}">秋芙蓉</td>
                    <td th:text="${list.info.sex==0?'男':'女'}">男</td>
                    <td th:text="${list.info.age}">20</td>
                    <td th:text="${list.info.province}">河南省</td>
                    <td th:text="${list.info.city}">南阳</td>
                    <td th:text="${list.info.address}">方城</td>
                    <td th:text="${list.info.phone}">54685421</td>
                    <td>
                        <span class="text-primary" th:if="${list.user.onLine==0}">在线</span>
                        <span class="text-primary" style="color: grey !important"
                              th:if="${list.user.onLine==1}">离线</span>
                        <span class="text-primary" style="color: grey !important"
                              th:if="${list.user.onLine==2}">隐身</span>
                    </td>
                    <td>

                        <span th:if="${list.user.level < 5}" th:each="i : ${#numbers.sequence(1,list.user.level)}">
                              <img src="images/star.png" style="width:20px"/>
                        </span>

                        <span th:if="${list.user.level >= 5 && list.user.level < 25}">
                            <span th:each="i : ${#numbers.sequence(1,list.user.level / 5)}">
                                ☪
                            </span>
                            <! --
                            <span th:if="${list.user.level % 5 != 0}" th:each="i : ${#numbers.sequence(1, list.user.Level % 5)}">
                                <img src="images/star.png" style="width:20px"/>
                            </span>
                        </span>

                        <span th:if="${list.user.level >= 25 && list.user.level < 125}">
                            <span th:each="i : ${#numbers.sequence(1,list.user.level / 25)}">
                                ☀
                            </span>
                            <span th:if="${list.user.level % 25 != 0 && list.user.level % 25 < 5}">
                                <span th:each="i : ${#numbers.sequence(1,list.user.level % 25)}">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                            <span th:if="${list.user.level % 25 != 0 && list.user.level % 25 >=5 && list.user.level %25 < 25}">
                                <span th:each="i : ${#numbers.sequence(1,list.user.level % 25 / 5)}">
                                    ☪
                                </span>
                                <span th:if="${list.user.level % 25 % 5!= 0}" th:each="i : ${#numbers.sequence(1, list.user.Level % 25 % 5 )}">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                        </span>

                        <span th:if="${list.user.level >= 125}">
                            <span th:each="i : ${#numbers.sequence(1,list.user.level / 125)}">
                                👑
                            </span>
                            <span th:if="${list.user.level % 125 != 0 && list.user.level % 125 < 5}">
                                <span th:each="i : ${#numbers.sequence(1,list.user.level % 125)}">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                            <span th:if="${list.user.level % 125 != 0 && list.user.level % 125 >= 5 && list.user.level % 125 < 25}">
                                <span th:each="i : ${#numbers.sequence(1,list.user.level % 125 / 5)}">
                                    ☪
                                </span>
                                <span th:if="${list.user.level % 125 % 25 % 5!= 0}" th:each="i : ${#numbers.sequence(1, list.user.Level % 125 % 25 % 5 )}">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                            <span th:if="${list.user.level % 125 != 0 && list.user.level % 125 >= 25 && list.user.level % 125 < 125}">
                                <span th:each="i : ${#numbers.sequence(1,list.user.level % 125 / 25)}">
                                    ☀
                                </span>
                                <span th:if="${list.user.level % 125 % 25 % 5 != 0 && list.user.level % 125 % 25 >= 5 && list.user.level % 125 % 25 < 25 }" th:each="i : ${#numbers.sequence(1, list.user.Level % 125 % 25 / 5 )}">
                                    ☪
                                </span>
                                <span th:if="${list.user.level % 125 % 25 % 5!= 0}" th:each="i : ${#numbers.sequence(1, list.user.Level % 125 % 25 % 5 )}">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                        </span>

                    </td>
                </tr>

                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${data.getCurrent() == 1} ? 'disabled':''">
                        <a class="page-link" th:href="@{home(pageIndex=${data.getCurrent() - 1 })}">上一页</a>
                    </li>
                    <li th:classappend="${data.getCurrent == i}?'active':''" th:each="i:${#numbers.sequence(1,data.getPages())}" class="page-item">
                        <a class="page-link" th:href="@{home(pageIndex=${i})}">
                            <span th:text="${i}"></span>
                        </a>
                    </li>
                    <li class="page-item" th:classappend="${data.getCurrent() == data.getPages()} ? 'disabled':''">
                        <a class="page-link" th:href="@{home(pageIndex=${data.getCurrent() + 1 })}">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
